<template>
  <div class="GoodsNewclassify">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="0" style="font-size:1rem">
          <a-col :span="24">基本信息</a-col>
        </a-row>
        <a-row :gutter="0" style="margin-top:1%">
          <a-col :span="24">
            <a-form-item label="分类名称" :label-col="{ span: 2 }" :wrapper-col="{ span: 8 }">
              <a-input
                v-decorator="[
          'classifyName',
          {rules: [{ required: true, message: '请输入分类名称!' }]}
        ]"
                placeholder="请输入"
              />
              <p>不超过16个字符</p>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="0">
          <a-col :span="24">
            <a-form-item label="分类分级" :label-col="{ span: 2 }" :wrapper-col="{ span: 8 }">
              <a-radio-group v-decorator="['radioGroup']" :checked="true">
                <a-radio :value="1" @click="isShow=false">一级分类</a-radio>
                <a-radio :value="2" @click="isShow=true">二级分类</a-radio>
              </a-radio-group>
              <p>新建完成后，分类分级不可修改</p>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="0" v-show="isShow">
          <a-col :span="24">
            <a-form-item label="上级分类" :label-col="{ span: 2 }" :wrapper-col="{ span: 8 }">
              <a-select
                style="width: 100%"
                v-decorator="[
          'superiorClassify',
          {rules: [{ required: true, message: '请选择上级分类!' }]}
        ]"
                placeholder="请设置商品品牌"
              >
                <a-select-option
                  :value="item.id"
                  v-for="item in selectdata"
                  :key="item.index"
                >{{item.name}}</a-select-option>
              </a-select>
              <p>可修改上级分类</p>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="0">
          <a-col :span="24">
            <a-form-item label="序号" :label-col="{ span: 2 }" :wrapper-col="{ span: 8 }">
              <a-input-number v-decorator="['number', { initialValue: '' }]"/>
              <p>对数字排序，数字“1”为最高优先级</p>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="0">
          <a-col :span="24">
            <a-form-item style="text-align:right">
              <router-link to="/home/goodsadmin/goodsclassify" style="margin-right:1%">
                <a-button>返回</a-button>
              </router-link>
              <a-button type="primary" html-type="submit" @click="listSave">确定</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
export default {
  name: "GoodsNewclassify",
  data() {
    return {
      form: this.$form.createForm(this),
      isShow: false,
      selectdata: []
    };
  },
  created() {
    this.selectData();
  },
  methods: {
    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`
      });
    },
    normFile(e) {
      console.log("Upload event:", e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
    // 选择框数据
    selectData() {
      this.axios
        .post(this.baseUrl+"/goodsCategory/findParentGoodsCategoryList", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          this.selectdata = response.data.data;
          console.log(this.selectdata);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 新建信息
    listSave() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl+"/goodsCategory/save", {
          name: values.classifyName,
          classes: values.radioGroup,
          parentId: values.superiorClassify,
          sort: values.number,
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          if (response.data.code == 0) {
            this.$router.push("/home/goodsadmin/goodsclassify");
            this.$message.info("新建商品分类成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.GoodsNewclassify {
  width: 100%;
}
.ant-form-item {
  margin: 0;
}
</style>
